<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="static/js/jquery.js"></script>


		<<script src="static/js/vue.js"></script>
    <!-- 引入样式 -->
<link rel="stylesheet" href="static/element-ui/lib-master/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="static/element-ui/lib-master/index.js">
  
</script>



	</head>

	<body>

		<div id="app">
	<!--顶部导航条-->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-if="username!=null" style="color: teal;font-size: 20px;">
						{{username}},欢迎您
					   </div>
					<div class="menu-hd" v-else>
						<a href="login.html" target="_top" class="h">亲，请登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i class=""></i>后台管理</a></div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" ><i class="el-icon-shopping-cart-full"></i><span>购物车管理</span></a></div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd"><a href="#" target="_top"><i class="el-icon-star-off"></i><span>收藏夹</span></a></div>
			</ul>
			</div>

			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logo"><img src="static/images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="static/images/threeMouse.jpg" style="border-radius: 30px;" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">

								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					
             
					   
					<template v-for="cart,index in shoppingCarts">
                      <!-- <li>
						
						<img :src="'static/pimg/'+cart.productImg" height="70" class="itempic J_ItemImg"/>{{cart}}
					   </li> 
					     -->
  <tr class="item-list">
						<div class="bundle  bundle-last ">
							
							<div class="clear"></div>
							<div class="bundle-main">
								<ul class="item-content clearfix">
									<li class="td td-chk">


										
										<div class="cart-checkbox ">
											<input class="check" id="J_CheckBox_170037950254" name="items[]" v-model="opts" :value="index" type="checkbox">
											<label for="J_CheckBox_170037950254"></label>
										</div>
									</li>
									<li class="td td-item">
										<div class="item-pic">
										
											<a href="#" target="_blank"  class="J_MakePoint" :data-title="cart.productName" data-point="tbcart.8.12">
												<img :src="'static/pimg/'+cart.productImg" height="70" class="itempic J_ItemImg"/> </a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a href="#" target="_blank" :data-title="cart.productName" class="item-title J_MakePoint" data-point="tbcart.8.11">{{cart.productName}} {{cart.skuName}} </a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props item-props-can">
											<span class="sku-line">{{cart.skuProps}}</span>
											<!-- <span class="sku-line">包装：裸装</span>
											<span tabindex="0" class="btn-edit-sku theme-login">修改</span> -->
											<i class="theme-login am-icon-sort-desc"></i>
										</div>
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">78.00</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">{{cart.productPrice}}</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="amount-wrapper ">
											<div class="item-amount ">
												<div class="sl">
													
													<input class="min am-btn" name="" type="button" :data-id="index" value="-" @click="changeNum" data-oper="-" />
													<input class="text_box" name="" type="text" :value="cart.cartNum" style="width:30px;" />
													<input class="add am-btn" name="" type="button" value="+" :data-id="index" @click="changeNum" data-oper="+" />
												</div>
											</div>
										</div>
									</li>
									<li class="td td-sum">
										<div class="td-inner">
											<em tabindex="0" class="J_ItemSum number">{{totalPrice}}</em>
										</div>
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<a title="移入收藏夹" class="btn-fav" href="#">
                  移入收藏夹</a>
											<a href="javascript:;"   @click="del(cart.cartId)"  class="delete">
                                               删除</a>
										</div>
									</li>
								</ul>
								
				            </div>
						</div>
					</tr> 
	
					
					</template> 


            
				
				








		
				
			
	
					
				</div>
			

				<div class="float-bar-wrapper">
					<div id="J_SelectAll2" class="select-all J_SelectAll">
						<div class="cart-checkbox">
							<input class="check-all check" id="J_SelectAllCbx2" v-model="checked" @click="changeAllChecked()" name="select-all" value="true" type="checkbox">
							<label for="J_SelectAllCbx2"></label>
						</div>
						<span>全选</span>
					</div>
					<div class="operations">
						<a href="#"  @click="del" hidefocus="true" class="deleteAll">删除</a>
						<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
					</div>
					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount">{{opts.length}}</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">{{totalPrice}}</em></strong>
						</div>
						<div class="btn-area" >
					<a @click="gotoOrderSubmit" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算"> 
								<span>结&nbsp;算</span></a>
						</div>
					</div>

				</div>

				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">三只松鼠商城</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于本店</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>©qfedu.com 版权所有</em>
						</p>
					</div>
				</div>

			</div>

			<!--操作页面-->

			<div class="theme-popover-mask"></div>

			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="static/images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

					</form>
				</div>
			</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>	
			<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>

		</div>
		
	
<script src="static/js/vue.min.js"></script>
<script src="static/js/cookie_utils.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/base.js"></script>
		<script type="text/javascript">
	
		  
		var vm=new Vue({
			el:'#app',
			data:{
				checked:false,
				cartId:40,
				username:"",
				token:null,
				shoppingCarts:[],
				// 进行复选框的双向绑定
				opts:[],
                totalPrice:0.0,
				// arry:[{'aaa':1,'bbb':2,  'ccc':3},
				//        {'aaa':4,'bbb':5,  'ccc':6},
			    //  ]
				cids:"", 
			},
			watch:{
				opts:function(){
					// console.log(this.opts);
					 this.totalPrice=0;

					for(var i=0;i<this.opts.length;i++){
					
                     var index=this.opts[i];
					 console.log(index);
					 this.totalPrice= this.totalPrice+ this.shoppingCarts[index].cartNum * this.shoppingCarts[index].productPrice;
					
					//  console.log(this.shoppingCarts[index].cartNum * this.shoppingCarts[index].productPrice);

					}
				}
			},
			created(){
				this.handleSearch();
		
				
			},
		
			
           methods:{
			   handleSearch(){
				this.username=getCookieValue("username");
				 this.token=getCookieValue("token");
				console.log("token="+this.token);
				var userId=getCookieValue("userId");
				if(this.token==null || userId==null){
					var loginUrl="login.html?tips=请先登录!";

					window.location.href=encodeURI(loginUrl);
				}else{ 

					// var that=this;
			     axios({
									method:"get",
									url:baseUrl+"shopcart/list",
									headers:{
										token:this.token,
									},
									params:{
										userId:userId

									}

								}).then(res=> {
									// this.shoppingCarts=res.data.data;
									if(res.data.code==0||res.data.code==202){
										var loginUrl="login.html?tips=请先登录!&returnUrl=shopcart.html";
										window.location.href=encodeURI(loginUrl);
									}else{
										console.log(res.data);

									this.shoppingCarts=res.data.data;
									console.log("购物车的数据------");
									// console.log(res.data.data);
									
									}
								
								});
							}

			   },

			changeAllChecked: function () {
                var self=this;
                if (!self.checked) {
                    self.opts=[]
                } else {
                    self.opts=self.checkedArr;
                }
            },

			   changeNum(event){

				
				   var oper=event.srcElement.dataset.oper;

				   var index=event.srcElement.dataset.id;
				   console.log(oper);
				   if(oper=="+"){
					  
						this.shoppingCarts[index].cartNum=parseInt(this.shoppingCarts[index].cartNum) +1;
					   

				   }else{

					if(this.shoppingCarts[index].cartNum>1){
					this.shoppingCarts[index].cartNum=parseInt(this.shoppingCarts[index].cartNum)-1;
  					}
}

//   修改的cartId和cartNum
					var cartId=this.shoppingCarts[index].cartId;
					console.log(this.cartId);
					var cartNum=this.shoppingCarts[index].cartNum;
					var url1=baseUrl+"shopcart/update/"+cartId+"/"+cartNum;
					axios({
						url:url1,
						method:"put",
						params:{
							token:this.token
						}

					}).then((res)=>{
						ELEMENT.Message.success(res.data.msg);

						console.log(res);
						
						// 改变数量重新进行计算总价
						if(res.data.code=200){
							this.totalPrice=0;
                    for(var i=0;i<this.opts.length;i++){
					
					var index=this.opts[i];
					this.totalPrice= this.totalPrice+ this.shoppingCarts[index].cartNum * this.shoppingCarts[index].productPrice;
					
					console.log(this.shoppingCarts[index].cartNum * this.shoppingCarts[index].productPrice);

				
				
						

						}




						}
			

				

})



			   },
           
// 			addNum:function(event){
// 				// 这个可以打印绑定的id的值
// 				console.log("--add"+event.srcElement.dataset.id);
// 			    var index=event.srcElement.dataset.id;
// 				this.shoppingCarts[index].cartNum=parseInt(this.shoppingCarts[index].cartNum) +1;

				
				
// 			},
			
// 			mulNum:function(event){
			
// 			    var index=event.srcElement.dataset.id;
// 				if(this.shoppingCarts[index].cartNum>1){
// 					this.shoppingCarts[index].cartNum=parseInt(this.shoppingCarts[index].cartNum)-1;
//   }
				
				
				
// 			}


// 点击结算触发
  gotoOrderSubmit(){
       // 拿到index 然后拿到cartId 变成 1,3,9
      var cids="";  
      for(var i=0;i<=this.opts.length;i++){
		  var index=this.opts[i];
		
		  var cartId=this.shoppingCarts[index].cartId;
		  console.log(cartId);

		  
		  if(i<this.opts.length-1){
			  cids=cids+cartId+",";
			
			//   console.log(cids);
			
}else{

	this.cids=cids+cartId;
	  console.log("购物车的cids=");
	console.log(this.cids);
	
	// 跳转到order-add.html 携带 cids过去

	//注意一下： 一定要加上this
 window.location.href="pay.html?cids="+this.cids;
}

}



},

    del(cartId){
		this.token=getCookieValue("token");
		console.log(cartId);
	
		var url7=baseUrl+"shopcart/delete/"+cartId;

axios({
			url:url7,
			method:"delete",
			headers:{
				token:this.token,
				
			},
			

		}).then((res)=>{

		// Message({
        //   showClose: true,
        //   message: '删除购物车数据成功',
        //   type: 'success'
        // });
		ELEMENT.Message.success("删除购物车数据成功");

			console.log(res.data);	
			 this.handleSearch();
		 });
	







	}

		   }



		})
		
		
		
		
		
		
		
		
		
		</script>
	</body>

</html>